<template>
  <Form ref="postForm" :model="postForm" :label-width="80" :rules="ruleValidate">
    <FormItem>
      <Button type="primary" @click="submitForm">提交</Button>
      <Button style="margin-left: 8px" @click="close">退出</Button>
    </FormItem>
    <FormItem label="封面图片上传" prop="pictureUrl">
      <Upload
        v-model="postForm.pictureUrl"
        multiple
        type="drag"
        :action="uploadUrl"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-success="fileSuccess"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
          <p>Click or drag files here to upload</p>
        </div>
      </Upload>
    </FormItem>
    <FormItem label="标题" prop="articleTitle">
      <Input v-model="postForm.articleTitle" placeholder="Enter something..." />
    </FormItem>
    <FormItem label="简介" prop="descs">
      <Input v-model="postForm.descs" placeholder="Enter something..." />
    </FormItem>
    <FormItem label="状态" prop="status">
      <Select v-model="postForm.status">
        <Option value="1">显示</Option>
        <Option value="2">不显示</Option>
      </Select>
    </FormItem>
    <Tinymce ref="editor" v-model="postForm.text" :height="400" />
  </Form>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getUpdateIds, setUpdateIds } from '@/utils/host'
import { saveArticle, updateArticle, getArticleById } from '@/api/article_request'

const defaultForm = {
  id: '',
  descs: '',
  categoryId: '',
  articleTitle: null,
  text: '',
  pictureUrl: '',
  praiseSumber: '',
  replyNumber: '',
  status: '',
  recommendStatus: ''
}

export default {
  name: 'ArticleDetail',
  components: { Tinymce },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadUrl: ' http://localhost:5001/fastDfs/uploadUrl',
      getRemoteUserList: [{ '1': '发布' }, { '2': '不发布' }],
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      ruleValidate: {
        articleTitle: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      tempRoute: {}
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.content_short.length
    },
    displayTime: {
      get() {
        return (+new Date(this.postForm.display_time))
      },
      set(val) {
        this.postForm.display_time = new Date(val)
      }
    }
  },
  created() {
    var data = getUpdateIds('Update_article')
    console.log(data)
    if (data === undefined || data === [] || data === null) {
      return
    }
    console.log(data)
    if (data[1].status === 'update') {
      this.postForm.id = data[0].id
      setUpdateIds('Update_article', [])
      getArticleById(this.postForm.id).then(resposne => {
        this.postForm = resposne.data
      }).catch(error => {
        console.log(error)
        this.$Message.error('数据查询错误请联系管理员')
        this.close()
      })
    }
  },
  methods: {
    submitForm() {
      console.log(this.postForm)
      if (this.postForm.id === null || this.postForm.id === '' || this.postForm.id === undefined) {
        saveArticle(this.postForm).then(response => {
          this.$Message.success('保存成功')
          this.close()
        }).catch(error => {
          console.log(error)
          this.$Message.error('保存失敗')
        })
      } else {
        updateArticle(this.postForm).then(response => {
          this.$Message.success('修改成功')
          this.close()
        }).catch(error => {
          console.log(error)
          this.$Message.error('修改失敗')
        })
      }
    },
    fileSuccess(response, file, fileList) {
      console.log(response)
      this.postForm.pictureUrl = response
    },
    close() {
      this.$router.go(0)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  .article-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>
